<template>
	<swiper-item :class="`c-tab-pane pane-${name}`" v-show="active">
		<slot></slot>
	</swiper-item>
</template>

<script>
	export default {
		name: "c-tab-pane",
		props: {
			name: ''
		},
		data() {
			return {
				isActive: false
			};
		},
		computed: {
			active() {
				// console.log(this.$parent.$attrs.val, this.$parent.value, this.$parent.$attrs.val || this.$parent.value,
				// 	this.name);
				// // 
				return this.name === (this.$parent.$attrs.val || this.$parent.value)
			}
		},
		methods: {
			getNewData() {
				this.isActive = this.name === (this.$parent.$attrs.val || this.$parent.value)
			},
		},
	}
</script>

<style lang="scss">

</style>
